<template>
	<div
		:data-theme="theme"
		class="store-home productSort"
		:style="{
			'background-image': `linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.9) 100%),url(${merchantInfo.backImage})`,
		}"
	>
		<!-- <tui-skeleton v-if="skeletonShow"></tui-skeleton> -->
		<!-- <view class="fixed-top">
			<uni-nav-bar background-color="transparent" color="#333" :border='false' @clickLeft='returns' @clickRight="open">
				<view class="header">
					<view class="input" @click="search()">
						<text class="iconfont icon-sousuo"></text>
						<text class="place">search</text>
					</view>
				</view>
				<view slot="left" class="iconfont icon-dingbufanhui"></view>
				<view slot="right" class="iconfont icon-more"></view>
			</uni-nav-bar>
		</view> -->
		<u-navbar
			bgColor="transparent"
			@rightClick="open"
			:autoBack="true"
			:placeholder="true"
		>
			<template #center>
				<view
					class="header"
					:style="{
						flex: 1,
						marginLeft: '80rpx',
						marginRight: '80rpx',
						paddingRight: paddingRight + 'px',
					}"
				>
					<view class="input" @click="search()">
						<text class="iconfont icon-sousuo"></text>
						<text class="place">{{ $t(`page.goodsList.search`) }}</text>
					</view>
				</view>
			</template>
			<template #right>
				<view style="color: #fff" class="iconfont icon-more"></view>
			</template>
		</u-navbar>

		<view
			v-show="navShow && tabActive === 0"
			class="nav acea-row"
			style="justify-content: space-between"
		>
			<view class="nav-cont">
				<view
					:class="{ active: navActive === 0 }"
					class="item"
					@click="set_where(1)"
				>
					<view class="cont">
						{{ $t(`page.goodsList.default`) }}
					</view>
				</view>
				<view
					:class="{ active: navActive === 1 }"
					class="item"
					@click="set_where(2)"
				>
					<view class="cont">
						{{ $t(`page.goodsList.price`) }}
						<image
							v-if="price == 1"
							src="../../../static/images/up.png"
						></image>
						<image
							v-else-if="price == 2"
							src="../../../static/images/down.png"
						></image>
						<image v-else src="../../../static/images/horn.png"></image>
					</view>
				</view>
				<view
					:class="{ active: navActive === 2 }"
					class="item"
					@click="set_where(3)"
				>
					<view class="cont">
						{{ $t(`page.goodsList.sales`) }}
						<image
							v-if="stock == 1"
							src="../../../static/images/up.png"
						></image>
						<image
							v-else-if="stock == 2"
							src="../../../static/images/down.png"
						></image>
						<image v-else src="../../../static/images/horn.png"></image>
					</view>
				</view>
			</view>
			<view
				:class="{ active: navActive === 3 }"
				class="item"
				@click="
					navActive = 3;
					isColumn = !isColumn;
				"
			>
				<view class="cont">
					<text
						:class="[
							'layout-icon',
							'iconfont',
							isColumn ? 'icon-yangshi1' : 'icon-yangshi2',
						]"
					></text>
				</view>
			</view>
		</view>

		<scroll-view class="main" scroll-y="true" @scroll="scrollHome">
			<merHome
				:merchantInfo="merchantInfo"
				:merid="merid"
				type="detail"
			></merHome>
			<view
				v-show="!navShow && tabActive === 0"
				class="nav acea-row"
				style="justify-content: space-between"
			>
				<view class="nav-cont">
					<view
						:class="{ active: navActive === 0 }"
						class="item"
						@click="set_where(1)"
					>
						<view class="cont tui-skeleton-rect">
							{{ $t(`page.goodsList.default`) }}
						</view>
					</view>
					<view
						:class="{ active: navActive === 1 }"
						class="item"
						@click="set_where(2)"
					>
						<view class="cont tui-skeleton-rect">
							{{ $t(`page.goodsList.price`) }}
							<image
								v-if="price == 1"
								src="../../../static/images/up.png"
							></image>
							<image
								v-else-if="price == 2"
								src="../../../static/images/down.png"
							></image>
							<image v-else src="../../../static/images/horn.png"></image>
						</view>
					</view>
					<view
						:class="{ active: navActive === 2 }"
						class="item"
						@click="set_where(3)"
					>
						<view class="cont tui-skeleton-rect">
							{{ $t(`page.goodsList.sales`) }}
							<image
								v-if="stock == 1"
								src="../../../static/images/up.png"
							></image>
							<image
								v-else-if="stock == 2"
								src="../../../static/images/down.png"
							></image>
							<image v-else src="../../../static/images/horn.png"></image>
						</view>
					</view>
				</view>
				<view
					:class="{ active: navActive === 3 }"
					class="item"
					@click="
						navActive = 3;
						isColumn = !isColumn;
					"
				>
					<view class="cont tui-skeleton-rect">
						<text
							:class="[
								'layout-icon',
								'iconfont',
								isColumn ? 'icon-yangshi1' : 'icon-yangshi2',
							]"
						></text>
					</view>
				</view>
			</view>
			<view class="tab-cont">
				<!-- 商品 -->
				<view v-show="tabActive === 0" class="productList">
					<view v-if="productList.length" id="goods" @touchmove="onTouchmove">
						<view
							v-if="!isColumn"
							class="list acea-row row-between-wrapper"
							:class="isColumn == true ? '' : 'on'"
						>
							<view
								class="item"
								:class="isColumn == true ? '' : 'on'"
								hover-class="none"
								v-for="(item, index) in productList"
								:key="index"
								@click="godDetail(item)"
							>
								<view class="pictrue" :class="isColumn == true ? '' : 'on'">
									<easy-loadimage
										mode="widthFix"
										:image-src="item.image"
									></easy-loadimage>
								</view>
								<view class="text" :class="isColumn == true ? '' : 'on'">
									<view class="name line3">{{ item.storeName }}</view>
									<!-- <view v-if="!isColumn" class='couponActivity'>$500</view> -->
									<view
										class="money acea-row row-between-wrapper"
										:class="isColumn == true ? '' : 'on'"
									>
										<text class="num"
											><statistic :value="item.price" :currency="item.currency"
										/></text>
										<view class="sold"
											>{{
												Math.floor(item.sales) + Math.floor(item.ficti) || 0
											}}
											{{ $t(`message.tips.sold`) }}</view
										>
									</view>
								</view>
							</view>
						</view>
						<view v-else class="goods">
							<WaterfallsFlow
								:wfList="productList"
								@itemTap="godDetail"
								:type="1"
								:isStore="1"
							/>
						</view>
					</view>
					<view class="loadingicon acea-row row-center-wrapper">
						<text
							class="loading iconfont icon-jiazai"
							:hidden="goodsLoading == false"
						></text
						>{{ loadTitle }}
					</view>
				</view>
				<!-- 分类 -->
				<view v-show="tabActive === 1">
					<view class="category">
						<view v-for="item in category" :key="item.id" class="section">
							<view class="head" @click="goCategoryGoods(item.id)">
								<view class="title">{{ item.translateName }}</view>
								<view class="iconfont icon-xiangyou"></view>
							</view>
							<view v-if="item.childList" class="body">
								<view
									v-for="value in item.childList"
									:key="value.id"
									class="item"
									@click="goCategoryGoods(value.id)"
									>{{ value.name }}</view
								>
							</view>
						</view>
					</view>
					<view
						:hidden="!categoryLoading"
						class="acea-row row-center-wrapper loadingicon"
					>
						<text class="iconfont icon-jiazai loading"></text>{{ loadTitle }}
					</view>
				</view>

				<!-- 优惠券 -->
				<view v-show="tabActive === 2" class="couponBox">
					<view class="acea-row row-around navCoupon">
						<template>
							<view
								v-for="(item, index) in navList"
								:key="index"
								:class="[
									'acea-row',
									'row-middle',
									type === item.type ? 'on' : '',
								]"
							>
								<text @click="setType(item.type)">{{
									$t(`page.users.userCoupon.navList[${index}].name`)
								}}</text>
							</view>
						</template>
					</view>
					<view v-if="couponsList.length" class="coupon coupon-list">
						<view v-for="item in couponsList" :key="item.id" class="item">
							<!-- :class="{gary:item.isUse}" -->
							<view class="left main_bg">
								<view class="money">
									<text
										><statistic :value="item.money" :currency="item.currency"
									/></text>
									<view class="pic-num" v-if="parseFloat(item.minPrice) > 0"
										><statistic
											:value="item.minPrice"
											:currency="item.currency"
										/>
										{{ $t(`page.users.userCoupon.min`) }}</view
									>
								</view>
							</view>
							<view class="right">
								<view class="name">
									<text :class="{ gary: item.isUse }">{{
										item.useType === 1
											? $t(`page.users.userCoupon.navList[0].name`)
											: $t(`page.users.userCoupon.navList[1].name`)
									}}</text>

									{{ item.name }}
								</view>
								<view class="time-wrap" style="justify-content: space-between">
									<block v-if="item.isFixedTime">
										<view class="time"
											>{{ $filters.dateFormat(item.useStartTimeStr) }}-{{
												$filters.dateFormat(item.useEndTimeStr)
											}}</view
										>
									</block>
									<block v-else>
										<view>{{
											$t(`page.users.userCoupon.receivedInfo`) +
											item.day +
											$t(`page.users.userCoupon.receivedInfo1`)
										}}</view>
									</block>
									<block v-if="item.isUse">
										<view class="button gary">{{
											$t(`page.users.userCoupon.received`)
										}}</view>
									</block>
									<block v-else>
										<view class="button" @click="receiveCoupon(item)">{{
											$t(`page.users.userCoupon.receive`)
										}}</view>
									</block>
								</view>
							</view>
						</view>
					</view>
					<view class="loadingicon acea-row row-center-wrapper">
						<text
							class="loading iconfont icon-jiazai"
							:hidden="loadingcoupon == false"
						></text
						>{{ couponsList.length ? loadTitle : "" }}
					</view>
					<emptyPage
						v-if="couponsList.length == 0 && !loadingcoupon"
						title="暂无优惠券~"
					></emptyPage>
				</view>
			</view>
		</scroll-view>

		<view class="footer">
			<view
				v-for="(item, index) in tabs"
				:key="index"
				:class="{ active: tabActive === index }"
				class="item"
				@click="tab(index)"
			>
				<view :class="['iconfont', item.icon]"></view>
				<view class="line2">{{ item.name }}</view>
			</view>
		</view>
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<user-drawer @close="closeDrawer"></user-drawer>
		</tui-drawer>
	</div>
</template>

<script>
import {
	getMerCategoryApi,
	getMerDetailApi,
	getMerCollectAddApi,
	getMerCollectCancelApi,
	getMerIndexInfoApi,
	getMerProListApi,
} from "@/api/merchant.js";
import tuiSticky from "@/components/tui-sticky/tui-sticky";
import WaterfallsFlow from "@/components/WaterfallsFlow/WaterfallsFlow.vue";
import { mapState } from "pinia";
import { getCoupons, setCouponReceive } from "@/api/api.js";
import { toLogin } from "@/libs/login.js";
import emptyPage from "@/components/emptyPage.vue";
import merHome from "@/components/merHome/index.vue";
import { goShopDetail } from "@/libs/order.js";
import { chatConfig } from "@/utils/consumerType.js";
import { useAppStore } from "@/stores/app";
import { isJSON, toTranslateLang } from "@/utils/index.js";
const appStore = useAppStore();
import statistic from "@/components/statistic";
export default {
	components: {
		tuiSticky,
		WaterfallsFlow,
		emptyPage,
		merHome,
		statistic,
	},
	computed: {
		...mapState(useAppStore, [
			"merchantClassify",
			"merchantType",
			"isLogin",
			"uid",
		]),
	},
	// 滚动监听
	onPageScroll(e) {
		// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		uni.$emit("scroll");
	},
	data() {
		return {
			navList: [
				{
					type: 1,
					name: "商家券",
					count: 0,
				},
				{
					type: 2,
					name: "商品券",
					count: 0,
				},
			],
			type: 1,
			mer_banner: "./static/images/store.png",
			couponsList: [],
			loadTitle: this.$t(`page.goodsList.more`),
			categoryLoading: false,
			category: [],
			// 底部菜单
			tabs: [
				{
					icon: "icon-yizhan_o",
					name: this.$t(`page.store.index`),
				},
				{
					icon: "icon-yingyongAPP_o",
					name: this.$t(`page.store.classify`),
				},
				{
					icon: "icon-huobiliu_o",
					name: this.$t(`page.store.collar`),
				},
				{
					icon: "icon-kefu_o",
					name: this.$t(`page.store.call`),
				},
			],
			productList: [],
			scrollTop: 0,
			merchantInfo: {},
			sortPrice: "",
			skeletonShow: true, //骨架屏显示隐藏
			rightDrawer: false,
			navShow: false,
			navActive: 0,
			tabActive: 0, // 底部切换
			isColumn: true, // 商品列表排列方式
			stock: 0,
			merid: 0,
			price: 0,
			where: {
				keyword: "",
				priceOrder: "",
				salesOrder: "",
				page: 1,
				limit: 20,
				cid: 0,
				merId: 0,
			},
			loading: false,
			loadend: false,
			goodsLoading: false,
			loadendcoupon: false,
			loadingcoupon: false,
			page: 1,
			limit: 10,
			theme: "theme3",
			paddingRight: 0,
		};
	},
	watch: {
		tabActive: function (value, old) {
			switch (value) {
				case 0:
					this.getGoods();
					break;
				case 1:
					this.getMerCategory();
					break;
					// if (this.service_open) {
					// 	this.get_service_list();
					// }
					break;
				case 2:
					this.getCoupon();
					break;
			}
		},
	},
	onLoad(options) {
		this.merid = parseInt(options.id);
	},
	mounted: function () {
		appStore.MerTypeList();

		this.getMerIndexInfo();
		this.getGoods();
		// this.getMerCategory();

		// #ifdef MP-WEIXIN
		this.paddingRight = uni.getMenuButtonBoundingClientRect().width;
		// #endif
	},
	methods: {
		// 领取优惠券
		receiveCoupon(item) {
			let that = this;
			if (that.isLogin === false) {
				toLogin();
			} else {
				uni.showLoading({
					title: this.$t(`message.tips.loding`),
				});

				setCouponReceive(item.id)
					.then((res) => {
						uni.showToast({
							title: res.message,
							icon: "none",
						});
						uni.hideLoading();
						item.isUse = !item.isUse;
					})
					.catch((err) => {
						uni.showToast({
							title: err,
							icon: "none",
						});
						uni.hideLoading();
					});
			}
		},
		setType: function (type) {
			if (this.type !== type) {
				this.type = type;
				this.couponsList = [];
				this.page = 1;
				this.loadendcoupon = false;
				this.getCoupon();
			}
		},
		onTouchmove(e) {
			if (this.loadend) return;
			if (this.loading) return;
			if (this.goodsLoading) return;
			const query = uni.createSelectorQuery().in(this);
			query
				.select("#goods")
				.boundingClientRect((data) => {
					if (data.bottom < 1500 && data.top < 0) {
						this.getGoods();
					}
				})
				.exec();
			// 模拟触底刷新
		},
		getMerIndexInfo() {
			let that = this;
			getMerIndexInfoApi(this.merid)
				.then((res) => {
					this.merchantInfo = res.data;
					uni.setNavigationBarTitle({
						title: res.data.name,
					});
					appStore.MERCHANTJINFO(res.data);
					this.skeletonShow = false;
				})
				.catch((err) => {
					that.loading = false;
					that.loadTitle = this.$t(`page.goodsList.more`);
					this.skeletonShow = false;
				});
		},
		getMerCategory() {
			getMerCategoryApi(this.merid)
				.then((res) => {
					toTranslateLang(res.data, "ru");

					this.category = res.data;

					this.isShow = true;
				})
				.catch((err) => {
					// return this.$util.Tips({
					// 	title: err,
					// });
				});
		},
		goCategoryGoods(id) {
			this.clear();
			this.where.cid = id;
			this.getGoods();
			this.tabActive = 0;
		},
		// 去详情页
		godDetail(item) {
			goShopDetail(item);
		},
		// 获取商铺优惠券
		getCoupon: function () {
			let that = this;
			if (that.loadendcoupon) return false;
			if (that.loadingcoupon) return false;
			that.loadingcoupon = true;
			getCoupons({
				page: that.page,
				limit: that.limit,
				useType: this.type,
				merId: this.merid,
			})
				.then((res) => {
					let list = res.data.list,
						loadend = list.length < that.limit;
					let couponsList = that.$util.SplitArray(list, that.couponsList);
					that.$set(that, "couponsList", couponsList);
					that.loadendcoupon = loadend;
					// this.$t("page.goodsList.no")
					that.loadTitle = loadend ? "" : this.$t("page.goodsList.more");
					that.page = that.page + 1;
					that.loadingcoupon = false;
					that.isShow = true;
				})
				.catch((err) => {
					that.loadingcoupon = false;
					that.loadTitle = this.$t("page.goodsList.more");
				});
		},
		// 选择条件展示商品
		set_where: function (param) {
			this.clear();
			switch (param) {
				case 1:
					this.price = 0;
					this.stock = 0;
					this.navActive = 0;
					break;
				case 2:
					if (this.price == 0) this.price = 1;
					else if (this.price == 1) this.price = 2;
					else if (this.price == 2) this.price = 1;
					this.stock = 0;
					this.navActive = 1;
					break;
				case 3:
					if (this.stock == 0) this.stock = 1;
					else if (this.stock == 1) this.stock = 2;
					else if (this.stock == 2) this.stock = 1;
					this.price = 0;
					this.navActive = 2;
					break;
				case 4:
					this.price = 0;
					this.stock = 0;
					this.navActive = 3;
					break;
			}
			this.getGoods();
		},
		clear() {
			this.loading = false;
			this.loadend = false;
			this.where = {
				keyword: "",
				priceOrder: "",
				salesOrder: "",
				page: 1,
				limit: 20,
				cid: 0,
			};
			this.productList = [];
		},
		getGoods() {
			let that = this;
			if (that.loadend) return;
			if (that.goodsLoading) return;
			that.goodsLoading = true;
			this.where.merId = this.merid;
			if (this.price == 0) this.where.priceOrder = "";
			else if (this.price == 1) this.where.priceOrder = "asc";
			else if (this.price == 2) this.where.priceOrder = "desc";
			if (this.stock == 0) this.where.salesOrder = "";
			else if (this.stock == 1) this.where.salesOrder = "asc";
			else if (this.stock == 2) this.where.salesOrder = "desc";
			that.loadTitle = "";
			getMerProListApi(that.where)
				.then((res) => {
					console.log("res", res);
					let list = res.data.list;
					let goodsList = that.$util.SplitArray(list, that.goods);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.goodsLoading = false;
					// this.$t("page.goodsList.no")
					that.loadTitle = loadend ? "" : this.$t("page.goodsList.more");
					that.$set(that, "productList", goodsList);
					that.$set(that.where, "page", that.where.page + 1);
				})
				.catch((err) => {
					console.log("err", err);
					return;
					that.goodsLoading = false;
					uni.showToast({
						title: err,
						icon: "none",
					});
					setTimeout(function () {
						//uni.navigateBack()
					}, 1000);
				});
		},
		// 商铺底部切换
		tab: function (param) {
			this.tabActive = param;
			this.clear();
			if (param === 3) chatConfig("mer");
		},
		stickyChange: function (e) {
			let index = e.index;
			this.lists[index].stickyTop = e.top;
		},
		// 商铺首页滚动 navbar 吸顶
		scrollHome: function (e) {
			uni.$emit("scroll");
			this.navShow = e.detail.scrollTop >= 50;
		},
		closeDrawer() {
			this.rightDrawer = false;
		},
		open() {
			this.rightDrawer = true;
		},
		search() {
			uni.navigateTo({
				url: "/pages/goods_list/index?merId=" + this.merid,
			});
		},
		returns() {
			uni.navigateBack();
		},
	},
	onReachBottom() {
		// 模拟触底刷新
		if (this.tabActive == 0) {
			setTimeout(() => {
				this.productList.push(...this.productList);
			}, 500);
		}
	},
	onPullDownRefresh() {
		// 模拟上拉刷新
		setTimeout(() => {
			const newList = this.productList.reverse();
			this.productList = newList;
			uni.stopPullDownRefresh();
		}, 500);
	},
};
</script>

<style lang="scss" scoped>
.main_bg {
	@include main_bg_color(theme);
}
.select {
	@include main_color(theme);
	@include coupons_border_color(theme);
}
.sold {
	font-size: 26rpx;
	color: #888888;
}
.navCoupon {
	width: 100%;
	height: 106rpx;
	color: #999999;
	// background-color: #fff;
}

.navCoupon .acea-row {
	border-top: 5rpx solid transparent;
	border-bottom: 5rpx solid transparent;
	cursor: pointer;
}

.navCoupon .acea-row.on {
	@include tab_border_bottom(theme);
	@include main_color(theme);
}
.tab-cont {
	min-height: 500rpx;
}
.couponBox {
	::v-deep .empty-box {
		padding-top: 200rpx;
		margin-top: 0 !important;
	}
}

.main {
	flex: 1;
	min-height: 0rpx;
	height: calc(100vh - var(--window-top)); //calc()是动态计算函数
}
.font-bg-red {
	padding: 4rpx;
	@include main_bg_color(theme);
	color: #fff;
	font-size: 18rpx;
	display: inline-block;
	border-radius: 4rpx;
}
.goods {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: 20rpx;
	padding-left: 30rpx;
	width: 100%;
}
.coupon {
	padding: 30rpx;

	.item {
		display: flex;
		margin-bottom: 16rpx;
		height: 100%;
		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 240rpx;
			font-weight: 500;
			font-size: 24rpx;
			line-height: 1;
			color: #ffffff;

			&.gary {
				background-image: url("");
			}

			.money {
				text {
					margin-left: 10rpx;
					font-size: 60rpx;
				}
			}
		}

		.right {
			flex: 1;
			min-width: 0;
			padding-right: 18rpx;
			padding-left: 27rpx;
			background-color: #ffffff;

			.name {
				padding-top: 32rpx;
				padding-bottom: 32rpx;
				border-bottom: 1rpx solid #f0f0f0;
				font-weight: 500;
				font-size: 30;
				line-height: 1;
				color: #282828;

				text {
					display: inline-block;
					height: 28rpx;
					border-radius: 14rpx;
					margin-right: 15rpx;
					background-color: #fff4f3;
					font-weight: 500;
					font-size: 20rpx;
					line-height: 26rpx;
					text-align: center;
					padding: 0 6rpx;
					@include main_color(theme);
					@include coupons_border_color(theme);
					&.gary {
						border-color: #bbb;
						color: #bbb;
						background-color: #f5f5f5;
					}
				}
			}

			.time-wrap {
				display: flex;
				align-items: center;
				padding-top: 16rpx;
				padding-bottom: 16rpx;
				font-weight: 500;
				font-size: 20rpx;
				color: #999999;

				.time {
					flex: 1;
					min-width: 0;
				}

				.button {
					padding: 10rpx 8rpx;
					border-radius: 22rpx;
					@include main_bg_color(theme);
					font-weight: 500;
					font-size: 22rpx;
					// line-height: 44rpx;
					text-align: center;
					color: #ffffff;

					&.gary {
						background-color: #999 !important;
					}
				}
			}
		}
	}

	.disabled {
		.left {
			background-image: url("@/static/images/coupon2.png");
		}

		.right {
			.name {
				text {
					border-color: #c1c1c1;
					color: #c1c1c1;
				}
			}

			.time-wrap {
				.button {
					background-color: #cccccc;
					color: #ffffff;
				}
			}
		}
	}
}
.category {
	padding-top: 34rpx;
	padding-right: 20rpx;
	padding-left: 20rpx;

	.section {
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		background-color: #ffffff;

		.head {
			position: relative;
			display: flex;
			align-items: center;
			height: 90rpx;
			padding-right: 20rpx;
			padding-left: 36rpx;
			font-weight: bold;
			color: #282828;

			&::before {
				content: " ";
				position: absolute;
				top: 50%;
				left: 20rpx;
				width: 6rpx;
				height: 24rpx;
				@include main_bg_color(theme);
				transform: translateY(-50%);
			}

			.title {
				flex: 1;
				min-width: 0;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 30rpx;
			}

			.iconfont {
				font-size: 22rpx;
				line-height: 1;
			}
		}

		.body {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			padding: 9rpx 36rpx 14rpx;

			.item {
				width: 314rpx;
				height: 84rpx;
				padding-right: 30rpx;
				padding-left: 30rpx;
				border-radius: 10rpx;
				background-color: #f5f5f5;
				margin-bottom: 10rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-weight: 500;
				font-size: 26rpx;
				line-height: 84rpx;
				color: #282828;
			}
		}
	}
}
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	display: flex;
	width: 100%;
	height: calc(100rpx + env(safe-area-inset-bottom));
	background-color: #ffffff;
	opacity: 0.96;

	.item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 20rpx;
		color: #282828;

		.iconfont {
			font-size: 43rpx;
		}
	}

	.active {
		@include main_color(theme);
	}
}
.productList {
	// background: #f5f5f5;
	background: #ffffff;
	.list {
		padding: 30rpx;
	}
}

.productList .list.on {
	border-radius: 14rpx;
	margin-top: 0 !important;
	background-color: #fff;
	padding: 40rpx 0 0 0;
}

.productList .list .item {
	width: 335rpx;
	background-color: #fff;
	border-radius: 14rpx;
	margin-bottom: 20rpx;
}
.productList .list.item {
	&::before {
		content: " ";
		position: absolute;
		top: 0;
		right: 10px;
		left: 125px;
		border-top: 0.5px solid #f5f5f5;
	}
}
.productList .list .item.on {
	width: 100%;
	display: flex;
	padding: 0 24rpx 50rpx 24rpx;
	margin: 0;
	border-radius: 14rpx;
}

.productList .list .item .pictrue {
	position: relative;
	width: 100%;
	height: 335rpx;
}

.productList .list .item .pictrue.on,
.easy-loadimage,
image,
uni-image {
	width: 260rpx;
	height: 260rpx;
}

.productList .list .item .pictrue image.on {
	border-radius: 6rpx;
}

.productList .list .item .text.on {
	width: 456rpx;
	padding: 0 0 0 20rpx;
}

.productList .list .item .text .name {
	font-size: 28rpx;
	font-weight: bold;
	margin-top: 8rpx;
	color: #333333;
	margin-bottom: 30rpx;
}

.productList .list .item .text .money.on {
	margin-top: 50rpx;
}

.productList .list .item .text .money .num {
	font-size: 38rpx;
	font-weight: 900;
	@include price_color(theme);
}
.productList .list .item .text .y-money {
	font-size: 26rpx;
	color: #888888;
	text-decoration: line-through;
	margin-left: 14rpx;
}

.store-home-top {
	width: 100%;
	height: 360rpx;
	//background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, #000000 40%, #000000 100%);
	position: relative;
}
.store-home {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	padding-bottom: 100rpx;
	background: left top/750rpx calc(var(--status-bar-height) + 360rpx) no-repeat
		fixed;
	overflow: hidden;
}
.fixed-top {
	// position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
}
.nav.fixed {
	position: fixed;
	left: 0;
	width: 100%;

	.nav-cont {
		position: absolute;
		width: 80%;
		justify-content: space-between;
	}
}

.nav {
	position: relative;
	padding: 0 30rpx;
	.nav-cont {
		width: 80%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 84rpx;
	}
	.item {
		// flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 0;

		.cont {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 12rpx;
			height: 44rpx;
			border-radius: 22rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #ffffff;

			.arrow-icon {
				margin-left: 10rpx;
				font-size: 18rpx;
			}

			.layout-icon {
				font-size: 32rpx;
			}

			.icon-pailie {
				font-size: 32rpx;
			}

			image {
				width: 15rpx;
				height: 21rpx;
				margin-left: 7rpx;
			}
		}
	}

	.active {
		.cont {
			background-color: #ffffff;
			font-weight: bold;
			@include main_color(theme);
		}
	}

	.select {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 2;
		width: 100%;
		padding-right: 40rpx;
		padding-bottom: 28rpx;
		padding-left: 74rpx;
		border-bottom-right-radius: 24rpx;
		border-bottom-left-radius: 24rpx;
		background-color: #ffffff;

		.item {
			margin-top: 28rpx;
			font-size: 24rpx;
			color: #454545;
		}

		.active {
			//background: url(../../../static/images/active.png) right center/20rpx no-repeat;
			color: #e93323;
		}
	}
}

.icon-dingbufanhui,
.icon-more {
	color: #fff;
}
.productSort .header .input {
	height: 60rpx;
	background-color: #3f4244;
	border-radius: 50rpx;
	box-sizing: border-box;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
}

.productSort .header .input .iconfont {
	font-size: 26rpx;
	color: #666;
}
.productSort .header .input .place {
	padding-left: 12rpx;
	color: #ccc;
	font-size: 26rpx;
}
</style>
